<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style type="text/css">
        #list li{
            width: 300px;
            line-height: 40px;
            border-bottom: 1px solid #000;
            font-size: 25px;
            cursor: pointer;
        }

        div{
            position: absolute;
            top: 50px;
            left: 50px;
            border-radius: 50%;
        }

        #tar{position:relative;}
        #box1{width:500px;height:500px;background-color: #963;}
        #box2{width:400px;height:400px;background-color: #693;}
        #box3{width:300px;height:300px;background-color: #369;}
        #box4{width:200px;height:200px;background-color: #639;}
        #box5{width:100px;height:100px;background-color: #f00;}

    </style>

    <script src="./jquery-3.3.1.min.js"></script>

    <!-- <script src="./jquery-1.8.3.min.js"></script> -->

</head>
<body>
    <h1>JQ事件</h1>

    <button id="add">添加一行li标签</button>
    <button id="down">点击立即下载</button>
    <button id="remove">点击解绑</button>

    <a href="http://www.acfun.cn" id="ac">ACFUN</a>
    <a href="javascript:void(0)">死链/无效链接</a>

    <hr>

    <ul id="list">
        <li>七步诗---曹植</li>
        <li>煮豆燃豆萁, </li>
        <li>豆在釜中泣。</li>
        <li>本是同根生, </li>
        <li>相煎何太急? </li>

    </ul>

    <form action="1.php">
        <button type="submit">提交</button>
    </form>

    <div id="tar">
        <div id="box1">
            <div id="box2">
                <div id="box3">
                    <div id="box4">
                        <div id="box5"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 简写
        // $('#list li').click(function(e){
        //     // console.log(e);
        //     // console.dir(this);
        //     // console.dir($(this));
        //     console.log($(this).html());
        // });

        // // JQ 标准绑定形式
        // $('#list li').bind('click', function(){
        //     alert($(this).html());
        // });

        // // 多个事件的绑定
        // $('#list li').bind({
        //     'mouseover': function(){
        //         $(this).css('background-color','#999');
        //     },
        //     'mouseout': function(){
        //         $(this).css('background-color','');
        //     }
        // });

        // // on() 单事件
        // $('#list li').on('click', function(){
        //     alert($(this).html());
        // });

        // // on() 多事件
        // $('#list li').on({
        //     'mouseover': function(){
        //         $(this).css('background-color','#369');
        //     },
        //     'mouseout': function(){
        //         $(this).css('background-color','');
        //     }
        // });

        // // event
        // $('#list').on('mousemove', function(e){
        //     // console.log(e);
        //     // console.log(e.pageX, e.pageY); // 鼠标位置
        //     console.log(e.offsetX, e.offsetY); // 相对位置
        // });

        // 添加新元素到页面之中
        $('#add').click(function(){
            $('<li>啊,真是一首好湿!!!!</li>').appendTo('#list');
        });

        // 事件委托 / 委派
        $(document).on('mouseover', '#list li', function(){
            $(this).css('background-color','#f00');
        }).on('mouseout', '#list li', function(){
            $(this).css('background-color','');
        });

        // 一次性的事件
        $('#down').one('click', function(){
            alert('澳门赌场上线了,性感荷官在线发牌!');
        });

        // 解绑事件
        $('#remove').click(function(){
            console.log('解绑成功');

            // 解绑所有li的事件 (非委托)
            // $('#list li').off();
            
            // 解绑li指定的事件 (非委托)
            // $('#list li').off('mouseout click');

            // 解绑所有li的事件 (委托)
            $(document).off('mouseout mouseover', '#list li');
        });

        // 自动触发
        $('#add').trigger('click');

        // 阻止默认事件
        $('form').on('submit', false);

        $('#ac').click(function (){
            // 处理逻辑....
            return false;
        });

        // 阻止事件冒泡
        $('div').on('click', function (){
            $(this).css('background-color', '#000');
            return false;
        })

    </script>



</body>
</html>




